<template>
	<div class="manage">
		<div class="manage_title">
			<div class="manage_top flex justify_cen align_center">
				<img src="../../../../static/img/images/welfare1.png" />
				<span>门楣设置</span>
				<img src="../../../../static/img/images/welfare2.png" />
			</div>
			<div class="manage_input flex align_center">
				<div class="manage_input_name">主体名称</div>
				<input type="text" class="flex1" placeholder="杭州匠屋" v-model='message1.subject_name' />
			</div>
			<div class="manage_input flex align_center">
				<div class="manage_input_name">尾缀名称</div>
				<input type="text" class="flex1" placeholder="电子商务有限公司" v-model='message1.suffix_name' />
			</div>
			<el-button round class='manage_button' @click='jump1'>保存</el-button>
		</div>
		<div class="manage_active">
			<div class="manage_top flex justify_cen align_center" style="margin-bottom: 0;">
				<img src="../../../../static/img/images/welfare1.png" />
				<span>活动管理</span>
				<img src="../../../../static/img/images/welfare2.png" />
			</div>
			<div class="manage_activeTop">
				<p class="flex1">
					匠子派发权 ￥20000.00<span>（接力成功退还）</span>
				</p>
				<div>激活</div>
			</div>
			<div class="manage_input flex align_center">
				<div class="manage_input_name">接收账号</div>
				<input type="number" class="flex1" placeholder="输入接收人注册手机号" v-model="message2.num" />
			</div>
			<div class="manage_input flex " style="height: auto;">
				<div class="manage_input_name" style="line-height: 3rem;">增配选择</div>
				<div class="flex1 clear2">
					<p @click="changeI=0" class="manage_input_changep1" :class="changeI==0?'manage_input_changep2':''">后台设置项目</p>
					<p @click="changeI=1" class="manage_input_changep1" :class="changeI==1?'manage_input_changep2':''">后台设置项目</p>
					<p @click="changeI=2" class="manage_input_changep1" :class="changeI==2?'manage_input_changep2':''">后台设置项目</p>
					<p @click="changeI=3" class="manage_input_changep1" :class="changeI==3?'manage_input_changep2':''">后台设置项目</p>
				</div>
			</div>
			<div class="manage_input flex align_center">
				<div class="manage_input_name">匠子数量</div>
				<input type="number" class="flex1" placeholder="输入匠子数量" v-model="message2.num" />
				<div class="manage_input_code">派发</div>
			</div>
		</div>
		<div class="manage_sale">
			<div class="manage_top flex justify_cen align_center" style="margin-bottom: 0;">
				<img src="../../../../static/img/images/welfare1.png" />
				<span>销售管理</span>
				<img src="../../../../static/img/images/welfare2.png" />
			</div>
			<div class="manage_activeTop" style="margin-bottom: 0;">
				<p class="flex1">
					主题店功能激活 ￥50000.00
				</p>
				<div>激活</div>
			</div>
			<p style="height: 6rem;line-height: 6rem;text-align: center;font-size: 1.8rem;">同城商户邀请</p>
			<div class="manage_input flex align_center">
				<div class="manage_input_name">被邀商户</div>
				<input type="number" class="flex1" placeholder="输入被邀商户手机号" v-model="message2.num" />
				<div class="manage_input_code">邀请</div>
			</div>
		</div>
		<div class="manage_backstage">
			<div class="manage_top flex justify_cen align_center" style="margin-bottom: 0;">
				<img src="../../../../static/img/images/welfare1.png" />
				<span>后台信息</span>
				<img src="../../../../static/img/images/welfare2.png" />
			</div>
			<div class="clear2 flex" style="padding: 2rem 0;width: 90%;margin: 0 auto;">
				<div class="manage_backstage_left flex1">
					<p class="manage_backstage_p1">PC端后台网址：</p>
					<p class="manage_backstage_p1">后台登陆账号：</p>
					<p class="manage_backstage_p1">后台登陆密码：</p>
				</div>
				<div class="manage_backstage_right">
					复制网址
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data: function() {
			return {
				message1:{
					'subject_name':'',
					'suffix_name':''
				},
				message2:{
					'num':'',
				},
				message3:{
					'name':'',
					'num':'',
					'code':''
				},
				changeI:0
			}
		},
		mounted() {

		},
		methods: {
			jump1(){
				for(let i in this.message1){
					if(this.message1[i]==''){
						Toast('请先填写数据')
						return false;
					}
				}
				this.ajax(this, {
					'url': this.defines.set_lintel,
					'type': 'post',
					'data':{
						'member_id':window.uid,
						'shop_id':this.peopleList.shop_id,
						'subject_name':this.message1.subject_name,
						'suffix_name':this.message1.suffix_name
					},
					'callback': data => {
						this.Toast(data.data.error_msg)

					},
					'errorback': errory => {

					},

				})
				
			},
			jump2(){
				for(let i in this.message2){
					if(this.message2[i]==''){
						Toast('请先填写数据')
						return false;
					}
				}
				this.$router.push({
        			path: '/jiang',
				})
			},
			jump3(){
				for(let i in this.message3){
					if(this.message3[i]==''){
						Toast('请先填写数据')
						return false;
					}
				}
				this.$router.push({
        			path: '/jiang',
				})
			},
		}
	}
</script>

<style scoped>
	.manage_top{
		height: 4rem;
		width: 100%;
		background: #000;
		overflow: hidden;
		margin-bottom: 2rem;
	}
	.manage_top span{
		font-size: 1.8rem;
		color: #fff;
		padding: 0 1.5rem;
	}
	.manage_top img{
		height: 1.8rem;
		display: block;
	}
	.manage_input{
		height: 3rem;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 1rem;
	}
	.manage_input_name{
		width: 6.5rem;
		text-align: right;
		font-size: 1.6rem;
		margin-right: 1.6rem;
	}
	.manage_input input{
		height: 3rem;
		font-size: 1.4rem;
		line-height: 1.6rem;
		background: #e6e6e6;
		color: #000000;
		border-radius: 0.4rem;
		text-indent: 0.5rem;
	}
	.manage_input_changep1{
		color: #999;
		font-size: 1.6rem;
		border: 2px solid #999;
		border-radius:4px ;
		float: left;
		width: 47%;
		text-align: center;
		height: 3rem;
		line-height: 3rem;
		margin-bottom: 1rem;
	}
	.manage_input_changep2{
		color: #000;
		border-color: #000;
	}
	.manage_input_changep1:nth-child(2n){
		float: right;
	}
	.manage_input_code{
		border-radius: 0.4rem;
		padding: 0 1rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.2rem;
		line-height: 3rem;
		height: 3rem;
		margin-left: 1rem;
	}
	.manage_input .manage_input_p{
		font-size: 1.6rem;
		font-family: "微软雅黑";
	}
	.manage_input .manage_input_p p{
		display: inline-block;
	}
	.manage_button{
		padding: 1rem 3rem;
		background: #000;
		color: #f7bd40;
		display: block;
		font-size: 1.5rem;
		margin: 2rem auto;
	}
	.manage_sale_div{
		width: 90%;
		padding: 0 5%;
		height: 6rem;
		border-bottom: 1px solid #e6e6e6;
	}
	.manage_sale_p1{
		float: left;
		font-size: 1.6rem;
		line-height: 6rem;
		
	}
	.manage_sale_p2{
		float: right;
		font-size: 3rem;
		line-height: 6rem;
		
	}
	.manage_sale_p3{
		height: 6rem;
		line-height: 6rem;
		text-align: center;
		font-size: 1.8rem;
		
	}
	.manage_backstage_p1{
		font-size: 1.4rem;
		line-height: 2.5rem;
		word-break:break-all;
	}
	.manage_backstage_right{
		font-size: 1.3rem;
		height: 2.5rem;
		line-height: 2.5rem;
		padding: 0.7rem;
		background: #000;
		color: #f7bd40;
		border-radius: 0.4rem;
		margin-left: 2rem;
	}
	.manage_activeTop{
		width: 90%;
		padding: 0 5%;
		border-bottom: 1px solid #e6e6e6;
		height: 6rem;
		display: flex;
		margin-bottom: 1rem;
		align-items: center;
	}
	.manage_activeTop p{
		font-size: 1.6rem;
		line-height: 6rem;
		float: left;
	}
	.manage_activeTop span{
		color: #999;
		font-size: 1rem;
	}
	.manage_activeTop div{
		border-radius: 0.4rem;
	    padding: 0 1rem;
	    background: #000;
	    color: #f7bd40;
	    font-size: 1.2rem;
	    line-height: 3rem;
	    height: 3rem;
	    margin-left: 1rem;
	    float: right;
	}
</style>